/**@title:成员管理页面
* @Description:
* @author: Guitu
*/
<template>
	<view class="member">
		<view>
			<!-- 搜索框 -->
			<!-- <view class="search">
				<u-search class="search-left" placeholder="请输入搜索内容" v-model="search" :show-action="false"></u-search>
				<button class="search-right" type="info" size="mini">搜索</button>
			</view> -->
			<!-- 添加成员按钮 -->
			<u-sticky>
				<view class="dropdown-state">
					<u-dropdown ref="uDropdown" title-size="33" class="dropdown-item">
						<u-dropdown-item v-model="memberState" title="筛选" :options="options1"></u-dropdown-item>
					</u-dropdown>
				</view>
				<!-- <view class="addMember">
					<u-button size="default" :plain="true"  class="memberBtn" @click="addMember"> <u-icon name="plus" size="50"></u-icon></u-button>
				</view> -->
			</u-sticky>

			<!-- 成员信息 -->

			<view>
				<view class="memberInfo" v-for="(item,idx) of memberData" :key="idx">
					<!-- 信息 -->
					<view class="info-left">
						<view class="info">{{item.name}}</view>
						<view class="info">工号:{{item.mnum}}</view>
						<view class="info">手机:{{item.phone}}</view>
					</view>
					<!-- 按钮 -->
					<view class="info-right">
						<template v-if="item.state > 1 ? false : true">
							<!--  v-if="item.state > 1 ? false : true" -->
							<u-button class="modBtn" type="success" :plain="true" size="mini" @click="allow(item)">确认</u-button>
						</template>

						<u-button class="modBtn" type="info" size="mini" @click="modify(item)">修改</u-button>
						<!-- <u-button class="modBtn" type="warning" size="mini" @click="del(item)" :disabled="item.state === 4 ? true : false">移除</u-button> -->
						<u-button class="modBtn" type="warning" size="mini" @click="del(item)" :disabled="item.state === 4 ? true : false">离职</u-button>
					</view>
				</view>
				<u-loadmore margin-bottom="10" margin-top="10" :status="status" :load-text="loadText" />
			</view>
			<!-- 弹窗 -->
			<u-modal v-model="infoShow" :content="content" show-cancel-button="true" @confirm="confirm" @cancel="cancel">
				<!-- memberOper:0,	//0:无操作 1:删除成员信息 2:修改成员信息 3:添加成员信息 -->
				<view class="del" v-if="memberOper === 1">
					是否确认移除?
				</view>
				<view v-else-if="memberOper === 2 || memberOper === 3">
					<u-field v-model="currMemberInfo.name" label="昵称" placeholder="请填写昵称" required>
					</u-field>
					<u-field maxlength="11" v-model="currMemberInfo.phone" label="手机" placeholder="请填写手机号码" required trim>
					</u-field>
					<u-field v-model="currMemberInfo.addr" label="地址" placeholder="请填写地址" required trim>
					</u-field>
					<template v-if="memberOper === 3 ? false : true">
						<u-field v-model="currMemberInfo.mnum" label="工号" placeholder="请填写工号">
						</u-field>
					</template>
				</view>
				<view class="del" v-if="memberOper === 4">
					是否同意?
				</view>
			</u-modal>
		</view>

		<!-- 提示信息 -->
		<u-toast ref="uToast" />
		
		<!-- loading -->
		<wyb-loading ref="loading" />
	</view>
</template>

<script>
	import * as api from "@/api/apiList/user/member.js"

	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapMutations
	} = createNamespacedHelpers('userModule')

	export default {
		data() {
			return {
				// search: '', //搜索内容
				infoShow: false, //是否显示弹窗(修改信息)
				memberData: [], //成员数据
				memberOper: 0, //0:无操作 1:删除成员信息 2:修改成员信息 3:添加成员信息 4:团长同意添加该成员
				currMemberInfo: {
					name: null,
					phone: null,
					addr:null
				}, //当前操作的成员信息
				status: 'nomore', //默认提示文字
				page: {
					size: 5, //一页多少条
					current: 1, //第几页
				},
				loadText: { //加载提示文字
					nomore: '没有更多了',
					loading: '努力加载中',
				},
				memberState: 1, //成员状态 1:未确认 2:已确认
				options1: [{ //筛选状态
					label: '已确认',
					value: 1,
				}, {
					label: '未确认',
					value: 2,
				}],
			};
		},
		async onPullDownRefresh() { //下拉刷新
			Object.assign(this.$data, this.$options.data())
			let res = await this.API_list(this.page) //获取成员列表
			if (res.data.code === 1000) {
				// this.loading()
				this.memberData = res.data.data.records
				this.page.current += 1
				console.log(this.memberData)
			}
		},
		async onReachBottom() { //上拉加载更多
			let res
			if (this.memberState === 1) {
				res = await this.API_list(this.page) //获取已确认成员列表
				if (res.data.data.records.length != 0) {
					this.page.current += 1
				}
			} else {
				res = await this.API_unconfirmedList(this.page) //未确认成员列表
				if (res.data.data.records.length != 0) {
					this.page.current += 1
				}
			}
			this.status = 'loading';
			setTimeout(() => {
				if (res.data.data.records.length === 0) {
					this.status = 'nomore';
				} else {
					this.status = 'loading';
					this.memberData.push(...res.data.data.records);
				}
			}, 2000)
		},
		computed: {
			...mapState(["enterprise", "member"])
		},
		watch: { //监听筛选按钮
			memberState: {
				async handler(value) {
					this.$nextTick(() => {
						this.$refs.loading.showLoading() // 显示
					})
					this.page = {
						size: 5, //一页多少条
						current: 1, //第几页
					}
					this.memberData = []
					if (value === 1) {
						let res = await this.API_list(this.page) //获取成员列表
						console.log(res)
						if (res.data.code === 1000) {
							this.page.current += 1
							this.memberData = res.data.data.records
						}
					}
					if (value === 2) {
						let res = await this.API_unconfirmedList(this.page)
						if (res.data.code === 1000) {
							this.page.current += 1
							this.memberData = res.data.data.records
						}
					}
					this.$refs.loading.hideLoading() // 隐藏
				},
				immediate: true
			}
		},
		methods: {
			...mapMutations(["GET_member"]),
			async API_list(page) { //已确认成员列表
				let result = {
					page
				}
				return await api.list(result)
			},
			async API_unconfirmedList(page) {
				let result = {
					page
				}
				return await api.unconfirmedList(result)
			},
			async API_save(addMemberData, eid, address) { //添加成员
				let result = {
					data: {
						eid, //企业id
						mnum: '', //工号
						name: addMemberData.name, //昵称
						rname: '', //名字
						pwd: '', //密码
						wxid: '', //微信id
						wxuid: '', //微信uid
						addr: address, //员工地址
						phone: addMemberData.phone, //电话
						pic: '', //图片
						remark: '' //备注
					}
				}
				return await api.save(result)
			},
			async API_update(row) { //修改成员
				let result = {
					data: row
				}
				return await api.update(result)
			},
			async API_remove(ids) { //删除成员
				let result = {
					param: {
						ids: [ids]
					}
				}
				return await api.remove(result)
			},
			msgTips(code) { //提示效果
				if (code === 1000) {
					this.$refs.uToast.show({
						title: '操作成功',
						type: 'success'
					})
				} else {
					this.$refs.uToast.show({
						title: '操作失败',
						type: 'error'
					})
				}
			},
			async confirm() { //弹窗确认按钮
				//0:无操作 1:删除成员信息 2:修改成员信息 3:添加成员信息 4:团长同意添加该成员
				let regPhone = this.fil(this.currMemberInfo.phone)
				if (regPhone) {
					this.page = { //重置 page
						size: 5, //一页多少条
						current: 1, //第几页
					}
					switch (this.memberOper) {
						//1:删除成员信息 
						case 1:
							this.currMemberInfo.state = 3
							let res1 = await this.API_update(this.currMemberInfo)
							this.msgTips(res1.data.code)
							break;
							//2:修改成员信息
						case 2:
							let res2 = await this.API_update(this.currMemberInfo)
							this.msgTips(res2.data.code)
							this.GET_member(this.currMemberInfo)
							break;
							//3:添加成员信息
						case 3:
							let res3 = await this.API_save(this.currMemberInfo, this.enterprise.id, this.enterprise.address)
							this.msgTips(res3.data.code)
							break;
							//4:团长同意添加该成员
						case 4:
							this.currMemberInfo.state = 2
							this.currMemberInfo.addr = this.enterprise.address
							let res4 = await this.API_update(this.currMemberInfo)
							this.msgTips(res4.data.code)
							break;
					}
					this.memberData = []
					let res = await this.API_list(this.page) //刷新获取成员列表
					if (res.data.code === 1000) {
						this.page.current += 1
					}
					this.memberData = res.data.data.records
					this.infoShow = false
					this.memberOper = 0
					this.currMemberInfo = {}
				} else {
					this.$refs.uToast.show({
						title: '请填写手机号码',
						type: 'error',
						position: 'top',
						duration: 1000
					})
					this.infoShow = true
					this.currMemberInfo.phone = ''
				}
			},
			cancel() { //弹窗取消按钮
				this.infoShow = false
				this.memberOper = 0
				this.currMemberInfo = {}
			},
			async allow(row) { //确认成员按钮
				this.infoShow = true
				this.memberOper = 4
				console.log(row)
				this.currMemberInfo = JSON.parse(JSON.stringify(row))
			},
			async addMember() { //添加成员按钮
				this.infoShow = true
				this.memberOper = 3
			},
			modify(row) { //修改按钮
				this.currMemberInfo = JSON.parse(JSON.stringify(row))
				this.infoShow = true
				this.memberOper = 2
			},
			del(row) { //删除按钮
				this.currMemberInfo = JSON.parse(JSON.stringify(row))
				this.infoShow = true
				this.memberOper = 1
			},
			fil(param) { //验证手机号码
				let reg = /^(1\d{10})$/
				return reg.test(param)
			}
		},
		onReady() { //进入页面前的加载效果
			// this.loading()
		}
	}
</script>

<style lang="scss" scoped>
	.member {
		width: 100%;
		padding: 20rpx;

		.loading {
			width: 100%;
			height: 100vh;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 搜索框样式 */
		.search {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.search-left {
				width: 80%;
			}

			.search-right {
				// flex: 1;
				align-items: center;
			}
		}

		.dropdown-state {
			width: 100%;
			// position: relative;
			// z-index: 999999;
			background-color: #fff;
			// box-shadow: 0px 2rpx 5rpx #909090;
			border-bottom: 2rpx solid #f0f0f0;

		}

		/* 添加成员按钮样式 */
		.addMember {
			text-align: right;
			// height: 70rpx;
			// align-items: center;
			background-color: #fff;
			padding: 6rpx 0;
			border-bottom: 2rpx solid #f0f0f0;

			.memberBtn {
				text-align: right;
			}
		}

		/* 成员信息部分样式 */
		.memberInfo {
			padding: 20rpx 0;
			border-bottom: 2rpx solid #f0f0f0;

			//成员信息
			.info-left {
				width: 100%;

				.info {
					width: 100%;
					height: 50rpx;
					display: flex;
				}

				.info:nth-child(1) {
					font-size: 31rpx;
					font-weight: bold;
				}
			}

			//按钮
			.info-right {
				text-align: right;
				align-items: center;

				.modBtn {
					margin: 0 5rpx;
				}
			}
		}

		//弹窗
		.del {
			text-align: center;
			line-height: 90rpx;
			font-weight: 600;
		}
	}
</style>
